<template>
    <div class="page home-page">
        <div class="page-con">
            <div class="home-left">
                <div class="title">工程</div>
                <div class="link-div">
                    <div class="link-sub-title" :class="{'active':titleIndex == 1}" @click="changeIndex(1)"><img src="../static/img/img1.png"/><span>新建地面电站</span></div>
                    <div class="link-sub-title" :class="{'active':titleIndex == 2}" @click="changeIndex(2)"><img src="../static/img/img3.png"/><span>新建屋顶电站</span></div>
                    <div class="link-sub-title" :class="{'active':titleIndex == 3}" @click="changeIndex(3)"><img src="../static/img/img2.png"/><span>打开工程</span></div>
                </div>

                <div class="title" style="color:#333;margin-top:20px">工具</div>
                <div class="link-div">
                    <div class="link-sub-li"><span>组件寿命预测</span></div>
                    <div class="link-sub-li"><span>新建屋顶电站</span></div>
                    <div class="link-sub-li"><span>打开工程</span></div>
                </div>

            </div>
            <div class="home-right">
                <div class="home-con" v-show="titleIndex != 0">
                    <!--新建地面电站 -->
                    <div class="new-file" v-if="titleIndex==1">
                        <div class="file-title">并网地面电站</div>
                        <div class="file-sub-title">
                            一般为商业发电模式，多为投资运营公司进行投资建设，规模也比较大，一般为兆瓦级以上，或多个兆瓦甚至十几个兆瓦，并网发电之后多为他用，以达到盈利目的。
                        </div>
                        <div class="file-sub-title">
                            <el-radio-group v-model="newType">
                                <el-radio :label="1">使用SketchUp进行3D设计</el-radio>
                                <el-radio :label="2">简洁方式配置</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="file-sub-title">
                            <el-button type="primary" size="small">新建并网地面电站</el-button>
                        </div>
                    </div>

                    <!--新建并网屋顶电站 -->
                    <div class="new-file" v-if="titleIndex==2">
                        <div class="file-title">并网屋顶电站</div>
                        <div class="file-sub-title">
                            一般为屋顶安装，由于受安装面积限制，所以表现形式为“多点”式，光伏安装容量一般在兆瓦级以下。其并网形式一般都在用户侧，以投资用户自发自用为主，余电可以上网。
                        </div>
                        <div class="file-sub-title">
                            <el-radio-group v-model="newType">
                                <el-radio :label="1">使用SketchUp进行3D设计</el-radio>
                                <el-radio :label="2">简洁方式配置</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="file-sub-title">
                            <el-button type="primary" size="small">新建并网屋顶电站</el-button>
                        </div>
                    </div>

                    <!--打开工程 -->
                    <div class="open-file" v-if="titleIndex==3">
                        <div class="file-list">
                            <div class="file-item" @mouseenter="enter($event)" @mouseleave="leave($event)">
                                <div class="file-left">
                                    <div class="title">常州河海校区屋顶光伏项目</div>
                                    <div class="sub-title">离网屋顶电站</div>
                                </div>
                                <div class="file-right">
                                    <div class="time">2019-05-31</div>
                                    <div class="del"><el-link type="info" style="font-size:12px;line-height:24px;">删除</el-link></div>
                                </div>
                            </div>
                            <div class="file-item" @mouseenter="enter($event)" @mouseleave="leave($event)">
                                <div class="file-left">
                                    <div class="title">常州河海校区屋顶光伏项目</div>
                                    <div class="sub-title">离网屋顶电站</div>
                                </div>
                                <div class="file-right">
                                    <div class="time">2019-05-31</div>
                                    <div class="del"><el-link type="info" style="font-size:12px;line-height:24px;">删除</el-link></div>
                                </div>
                            </div>
                            <div class="file-item" @mouseover="enter($event)" @mouseout="leave($event)">
                                <div class="file-left">
                                    <div class="title">常州河海校区屋顶光伏项目</div>
                                    <div class="sub-title">离网屋顶电站</div>
                                </div>
                                <div class="file-right">
                                    <div class="time">2019-05-31</div>
                                    <div class="del"><el-link type="info" style="font-size:12px;line-height:24px;">删除</el-link></div>
                                </div>
                            </div>
                            <div class="file-item" @mouseenter="enter($event)" @mouseleave="leave($event)">
                                <div class="file-left">
                                    <div class="title">常州河海校区屋顶光伏项目</div>
                                    <div class="sub-title">离网屋顶电站</div>
                                </div>
                                <div class="file-right">
                                    <div class="time">2019-05-31</div>
                                    <div class="del"><el-link type="info" style="font-size:12px;line-height:24px;">删除</el-link></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pagination-div">
                    <el-pagination
                            v-if="titleIndex==3"
                            layout="prev, pager, next"
                            :total="50">
                    </el-pagination>
                </div>
            </div>
        </div>
        <div class="page-bottom">
            <span style="font-size:20px;margin-right:10px">Welcome</span>
            <img src="../static/img/user.png" style="width:24px"/>
            <span class="user-name">大融</span>
            <el-link type="info">退出</el-link>
            <img src="../static/img/logo.png" style="height:22px;float:right;margin-right:60px;margin-top:10px"/>
        </div>

    </div>
</template>

<script>
  import {validatePhone} from '@/utils/validate';
  export default {
    name: 'home',
    data() {
      return {
          titleIndex : 0,
          newType:1,//新建模式
      }
    },
    methods: {
        changeIndex(index){
            this.titleIndex = index
        },

        enter(e){
            let $e = $(e.currentTarget);
            $e.find(".del").show();


        },
        leave(e){
            let $e = $(e.currentTarget);
            $e.find(".del").hide();
        }

    },
    created() {

    }
  }
</script>



